import { FLEX_STYLE_PROPS_DATA } from '@mantine/core';
import { FlexDemos } from '@docs/demos';
import { StylePropsTable } from '@/components/StylePropsTable';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Flex);

## Usage

<Demo data={FlexDemos.configurator} />

## Supported props

<StylePropsTable source={FLEX_STYLE_PROPS_DATA} />

## Responsive props

`Flex` component props can have responsive values the same way as other [style props](/styles/style-props/):

<Demo data={FlexDemos.responsive} />

## Difference from Group and Stack

`Flex` component is an alternative to [Group](/core/group/) and [Stack](/core/stack/).
`Flex` is more flexible, it allows creating both horizontal and vertical flexbox layouts, but requires more configuration.
Unlike [Group](/core/group/) and [Stack](/core/stack/) `Flex` is [polymorphic](/guides/polymorphic/) and supports responsive props.

<DataTable
  head={['', 'Group', 'Stack', 'Flex']}
  data={[
    ['Direction', 'horizontal', 'vertical', 'both'],
    ['Equal width children', '✅', '❌', '❌'],
    ['flex-wrap support', '✅', '❌', '✅'],
    ['Responsive flexbox props', '❌', '❌', '✅'],
    ['Polymorphic component', '❌', '❌', '✅'],
  ]}
/>

<FlexboxGapSupport component="Flex" />
